<!-- 使用 type="home" 属性设置首页 -->
<route type="home" lang="json">
{
  "layout": "tabbar",
  "style": { "navigationBarTitleText": "" },
  "name": "home"
}
</route>

<template>
  <view class="container">
    <view class="gradient-header"></view>
    <view class="tabs-container">
      <season></season>
      <wd-card>
        <template #title>
          <view class="tabs-icon-box">
            <image class="tabs-icon" :src="shangyi"> </image>
            <text class="tabs-label">{{ ClothesType.TOP }}</text>
          </view>
        </template>
        <tabs-image :tabs="tabs"> </tabs-image>
      </wd-card>
      <wd-card>
        <template #title>
          <view class="tabs-icon-box">
            <image class="tabs-icon" :src="kuzi"> </image>
            <text class="tabs-label">{{ ClothesType.PANTS }}</text>
          </view>
        </template>
        <tabs-image :tabs="tabs"> </tabs-image>
      </wd-card>
      <wd-card>
        <template #title>
          <view class="tabs-icon-box">
            <image class="tabs-icon" :src="xiezi"> </image>
            <text class="tabs-label">{{ ClothesType.FOOT }}</text>
          </view>
        </template>
        <tabs-image :tabs="tabs"> </tabs-image>
      </wd-card>
      <wd-card>
        <template #title>
          <view class="tabs-icon-box">
            <image class="tabs-icon" :src="peishi"> </image>
            <text class="tabs-label">{{ ClothesType.UNDERWEAR }}</text>
          </view>
        </template>
        <tabs-image :tabs="tabs"> </tabs-image>
      </wd-card>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue';
// 引入枚举
import { ClothesType } from './enum';
import tabsImage from '@/components/tabs-image/index.vue';
import season from '@/components/season/index.vue';
import shangyi from '@/static/上衣.png';
import kuzi from '@/static/长裤.png';
import xiezi from '@/static/运动鞋.png';
import peishi from '@/static/皮带配饰.png';
// 定义 tabs 数据
const tabs = ref([
  { image: 'https://via.placeholder.com/100x50?text=Tab+1' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+2' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+3' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+4' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+5' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+6' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+7' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+1' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+2' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+3' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+4' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+5' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+6' },
  { image: 'https://via.placeholder.com/100x50?text=Tab+7' },
]);

// 当前选中的 tab 索引
const currentIndex = ref(0);

// 控制 scroll-view 的滚动位置
const scrollLeft = ref(0);

// 每个 tab 的宽度（假设每个 tab 宽度相同）
const tabWidth = 72; // 100px 图片宽度 + 10px 右边距

// 计算 scroll-view 的滚动位置
const calculateScrollLeft = (index) => {
  const screenWidth = uni.getSystemInfoSync().windowWidth; // 获取屏幕宽度
  const halfScreenWidth = screenWidth / 2; // 屏幕宽度的一半
  const targetScrollLeft = index * tabWidth - halfScreenWidth + tabWidth / 2; // 目标滚动位置

  // 边界处理：不能滚动到负数或超过最大滚动范围
  const maxScrollLeft = tabs.value.length * tabWidth - screenWidth;
  return Math.max(0, Math.min(targetScrollLeft, maxScrollLeft));
};

// 切换 tab
const changeTab = (index) => {
  currentIndex.value = index;
  scrollLeft.value = calculateScrollLeft(index);
};
</script>

<style scoped>
.gradient-header {
  height: 120px; /* 设置高度 */
  width: 100%;
  background: linear-gradient(to bottom, #ff9a9e, #fad0c4); /* 粉色系垂直渐变 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.container {
  width: 100%;

  min-height: 100vh;
}
.tabs-icon-box {
  vertical-align: middle;
  display: flex;
  align-items: center;
}
.tabs-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.active .tab-image {
  border: 1px solid #007aff;
}
.tabs-container {
  height: 100%;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 120px;
}
.tabs-label {
  font-size: 14px;
  font-weight: 500;
}
</style>
